<style include="cr-shared-style settings-shared">
  cr-dialog::part(dialog) {
    height: 380px;
    width: 600px;
  }

  .sa-setup-title {
    line-height: 150%;
  }

  .sa-setup-body {
    height: 233px;
    margin-top: 5px;
  }

  .sa-setup-contents {
    width: 335px;
  }

  .flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .illustration {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 183px;
    height: 173px;
    margin-top: 15px;
    padding: 16px;
    width: 183px;
  }

  #intro .illustration {
     background-image:
        url(chrome://os-settings/images/computer_and_bluetooth_switch.svg);
  }

  #assign-switch .illustration.select {
    background-image:
      url(chrome://os-settings/images/switch_access_setup_guide_assign_select.svg);
  }

  #assign-switch .illustration.next {
    background-image:
      url(chrome://os-settings/images/switch_access_setup_guide_assign_next.svg);
  }

  #assign-switch .illustration.previous {
    background-image:
      url(chrome://os-settings/images/switch_access_setup_guide_assign_previous.svg);
  }

  #choose-switch-count .illustration.one-switch {
    background-image:
      url(chrome://os-settings/images/switch_access_setup_guide_choose_one_switch.svg);
  }

  #choose-switch-count .illustration.two-switches {
    background-image:
      url(chrome://os-settings/images/switch_access_setup_guide_choose_two_switches.svg);
  }

  #choose-switch-count .illustration.three-switches {
    background-image:
      url(chrome://os-settings/images/switch_access_setup_guide_choose_three_switches.svg);
  }

  #auto-scan-enabled .illustration {
    background-image:
      url(chrome://os-settings/images/switch_access_setup_guide_auto_scan_enabled.svg);
  }

  #closing .illustration {
    background-image:
      url(chrome://os-settings/images/switch_access_setup_guide_closing.svg);
  }

  #button-container {
    padding: 24px;
  }

  cr-button {
    margin: 4px;
  }

  .radio-button-title {
    color: var(--cr-primary-text-color);
    font-size: 14px;
  }

  .radio-button-description {
    padding-bottom: 16px;
  }

  #bluetooth {
    margin-inline-end: 250px;
  }
</style>
<cr-dialog id="switchAccessSetupGuideDialog" show-on-attach>
  <div slot="title" class="sa-setup-title" id="title">
    $i18n{switchAccessSetupIntroTitle}
  </div>
  <div slot="body" class="sa-setup-body">
    <div id="intro" class="flex">
      <div class="sa-setup-contents">
        $i18n{switchAccessSetupIntroBody}
      </div>
      <div class="illustration"></div>
    </div>
    <div id="assign-switch" class="flex" hidden>
      <div class="sa-setup-contents"></div>
      <div class="illustration"></div>
    </div>
    <div id="auto-scan-enabled" class="flex" hidden>
      <div class="sa-setup-contents">
        <p>$i18n{switchAccessSetupAutoScanEnabledExplanation}</p>
        <p>$i18n{switchAccessSetupAutoScanEnabledDirections}</p>
      </div>
      <div class="illustration"></div>
    </div>
    <div id="choose-switch-count" class="flex" hidden>
      <div class="sa-setup-contents">
        <cr-radio-group id="switch-count-group" selected="one-switch"
            on-selected-changed="onSwitchCountChanged_">
          <cr-radio-button name="one-switch" class="list-item"
              aria-label="$i18n{switchAccessSetupChoose1Switch}">
            <span class="radio-button-title">
              $i18n{switchAccessSetupChoose1Switch}
            <span>
          </cr-radio-button>
          <cr-radio-button name="two-switches" class="list-item"
              aria-label="$i18n{switchAccessSetupChoose2Switches}">
            <span class="radio-button-title">
              $i18n{switchAccessSetupChoose2Switches}
            </span>
            <div class="radio-button-description">
              $i18n{switchAccessSetupChoose2SwitchesDescription}
            </div>
          </cr-radio-button>
          <cr-radio-button name="three-switches" class=list-item"
              aria-label="$i18n{switchAccessSetupChoose3Switches}">
            <span class="radio-button-title">
              $i18n{switchAccessSetupChoose3Switches}
            </span>
            <div class="radio-button-description">
              $i18n{switchAccessSetupChoose3SwitchesDescription}
            </div>
          </cr-radio-button>
        </cr-radio-button-group>
      </div>
      <div class="illustration one-switch"
           id="choose-switch-count-illustration">
      </div>
    </div>
    <div id="auto-scan-speed" hidden>
      <p>$i18n{switchAccessSetupAutoScanSpeedDescription}</p>
      <cr-button id="autoScanSpeedSlower" on-click="onAutoScanSpeedSlower_">
        $i18n{switchAccessSetupAutoScanSlower}
      </cr-button>
      <settings-slider id="autoScanSpeedSlider"
        pref="{{prefs.settings.a11y.switch_access.auto_scan.speed_ms}}"
        ticks="[[autoScanSpeedRangeMs_]]"
        min="[[minScanSpeedMs_]]"
        max="[[maxScanSpeedMs_]"
        label-aria="$i18n{switchAccessAutoScanSpeedLabel}"
        label-min="[[minScanSpeedLabelSec_]]"
        label-max="[[maxScanSpeedLabelSec_]]">
      </settings-slider>
      <cr-button id="autoScanSpeedFaster" on-click="onAutoScanSpeedFaster_">
        $i18n{switchAccessSetupAutoScanFaster}
      </cr-button>
    </div>
    <div id="closing" class="flex" hidden>
      <div class="sa-setup-contents">
        <p id="closing-instructions"></p>
        <p>$i18n{switchAccessSetupClosingInfo}</p>
      </div>
      <div class="illustration"></div>
    </div>
  </div>
  <div id="button-container" slot="button-container">
    <cr-button on-click="onBluetoothClick_" id="bluetooth">
      $i18n{switchAccessSetupPairBluetooth}
    </cr-button>
    <cr-button on-click="onPreviousClick_" id="previous" hidden>
      $i18n{switchAccessSetupPrevious}
    </cr-button>
    <cr-button on-click="onStartOverClick_" id="start-over" hidden>
      $i18n{switchAccessSetupStartOver}
    </cr-button>
    <cr-button on-click="onExitClick_" id="exit">
      $i18n{switchAccessDialogExit}
    </cr-button>
    <cr-button class="action-button" on-click="onExitClick_"
        id="done" hidden>
      $i18n{switchAccessSetupDone}
    </cr-button>
    <cr-button class="action-button" on-click="onNextClick_" id="next">
      $i18n{switchAccessSetupNext}
    </cr-button>
  </div>
</cr-dialog>
